import styles from "./index.module.scss";
import EchartsEL from "./echartsEL";
import { useSelector } from "react-redux";
import { useEffect, useState } from "react";

export default function Profit() {
  const colors = ["#9AFC87", "#4A95FF"];
  const xData = ["目标经营产值", "实际经营产值"];
  const yData = [18, 35];
  const theme = useSelector((state) => state.theme);
  const [textColor, setTextColor] = useState("rgba(37, 76, 112, 1)");
  useEffect(() => {
    setTextColor(!theme ? "rgba(37, 76, 112, 1)" : "#fff");
  }, [theme]);
  return (
    <>
      <div className={styles.profit}>
        <div className={styles.profitLeft}>
          <div
            className={theme ? styles.profitLeftTopLight : styles.profitLeftTop}
          >
            <div className={styles.title}>目标经营产值</div>
            <div className={theme ? styles.valueLight : styles.value}>
              10,720
            </div>
          </div>
          <div
            className={
              theme ? styles.profitLeftBottomLight : styles.profitLeftBottom
            }
          >
            <div className={styles.title}>实际经营产值</div>
            <div className={theme ? styles.valueLight : styles.value}>
              10,720
            </div>
          </div>
        </div>
        <div className={styles.profitRight}>
          <EchartsEL
            textColor={textColor}
            xData={xData}
            yData={yData}
            colors={colors}
          ></EchartsEL>
        </div>
      </div>
    </>
  );
}
